<template>
	<div v-if="dialogVisible" class="dialog-mask">
		<div class="login-box">
			<div class="title_box">
				<img src="@/assets/logo.png" alt="Logo" class="logo-image" />
				<h1 style="margin:0px">锦田云</h1>
				<h2>智控全球云端</h2>
			</div>
			<div style="padding: 30px;">
				<el-tabs v-model="loginMethod" stretch>
					<!-- 账号密码登录 -->
					<el-tab-pane label="账号密码登录" name="password">
						<el-input v-model="username" placeholder="请输入账号" class="input" />
						<el-input v-model="password" type="password" placeholder="请输入密码" class="input" />
						<el-button type="primary" class="login-button" @click="handleLogin">登录</el-button>
					</el-tab-pane>
					<!-- 手机验证码登录 -->
					<el-tab-pane label="验证码登录" name="phone">
						<el-input v-model="phone" placeholder="请输入手机号" class="input" />
						<div style="display: flex; gap: 10px;">
							<el-input v-model="code" placeholder="验证码" class="input" style="flex: 1" />
							<el-button :disabled="codeTimer > 0" @click="sendCode" :loading="sendingCode">
								{{ codeTimer > 0 ? codeTimer + 's' : '发送验证码' }}
							</el-button>
						</div>
						<el-button type="primary" class="login-button" @click="handleLogin">登录</el-button>
					</el-tab-pane>
				</el-tabs>
				<!-- 添加注册链接 -->
				<div class="register-link">
					<el-link type="primary" @click="$router.push('/register')">注册账号</el-link>
				</div>
			</div>
		</div>
	</div>
</template>
<script>
	import md5 from 'js-md5';
	import request from '@/utils'
	export default {
		name: 'Login_dialog',
		props: {
			"dialogVisible": { //接收父组件传参控制弹框是否显示
				type: Boolean,
				default: false //默认为false不显示登录框
			},
		},
		data() {
			return {
				loginMethod: 'password',
				username: '',
				password: '',
				phone: '',
				code: '',
				codeTimer: 0,
				timer: null,
				sendingCode: false, // 新增发送验证码加载状态
			};
		},
		methods: {
			async handleLogin() {
				this.loading = true;
				try {
					let params = {
						login_type: this.loginMethod
					};
					if (this.loginMethod === 'password') {
						// 密码登录
						if (!this.username || !this.password) {
							this.$message.error('请输入账号和密码');
							return;
						}
						params.password = md5(this.password); // MD5加密
						params.username = this.username; // 假设用户名就是手机号
					} else {
						// 验证码登录
						if (!this.phone || !this.code) {
							this.$message.error('请输入手机号和验证码');
							return;
						}
						params.phone = this.phone;
						params.code = this.code;
					}
					const response = await request.post('/login/login', params)
					if (response.data.code === 200) {
						this.$message.success('登录成功');
						// 保存token到本地
						localStorage.setItem('token', response.data.data.token);
						localStorage.setItem('userID', response.data.data.userID);
						var userdata={
							username:this.username
						}
						// // 设置axios全局请求头
						// axios.defaults.headers.common['Authorization'] = `Bearer ${response.data.data.token}`;
						// this.$router.push('/Purches/default-id-123');
						this.$emit('update:dialogVisible', false)
						this.$store.commit('isLogin_fun')
						window.location.reload()
					} else {
						this.$message.error(response.msg || '登录失败');
					}
				} catch (error) {
					this.$message.error('登录失败，请稍后重试');
				} finally {
					this.loading = false;
				}
			},
			async sendCode() {
				if (!this.phone) {
					this.$message.error('请输入手机号');
					return;
				}
				// 简单的手机号格式验证
				if (!/^1[3-9]\d{9}$/.test(this.phone)) {
					this.$message.error('请输入正确的手机号');
					return;
				}
				this.sendingCode = true;
				try {
					const response = await request.post(`/login/send_message`, {
						phone: this.phone
					});
					console.log(response)
					console.log(response.data.code)
					if (response.data.code === 200) { // 假设成功返回code为200
						this.$message.success('验证码发送成功');
						this.startCodeTimer();
					} else {
						this.$message.error(response.data.data.message || '验证码发送失败');
					}
				} catch (error) {
					console.error('发送验证码失败:', error);
					this.$message.error('验证码发送失败，请稍后重试');
				} finally {
					this.sendingCode = false;
				}
			},
			startCodeTimer() {
				this.codeTimer = 60;
				this.timer = setInterval(() => {
					this.codeTimer--;
					if (this.codeTimer === 0) {
						clearInterval(this.timer);
					}
				}, 1000);
			}
		},
		beforeUnmount() {
			if (this.timer) clearInterval(this.timer);
		},
	};
</script>

<style lang="less" scoped>
	/* 遮罩层样式 */
	.dialog-mask {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background-color: rgba(0, 0, 0, 0.5);
		z-index: 9999;
		display: flex;
		justify-content: center;
		align-items: center;
		transition: opacity 0.3s ease;
	}

	/* 对话框容器 */
	.dialog-container {
		background-color: #fff;
		border-radius: 4px;
		box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
		overflow: hidden;
		animation: dialog-fade-in 0.3s;
	}

	/* 对话框动画 */
	/* 	@keyframes dialog-fade-in {
	  0% {
	    transform: translateY(-20px);
	    opacity: 0;
	  }
	  100% {
	    transform: translateY(0);
	    opacity: 1;
	  }
	} */
	.login-box {
		width: 500px;
		background: white;
		border-radius: 20px;
		box-shadow: 0 0 12px rgba(0, 0, 0, 0.15);
		text-align: center;
		overflow: hidden;
		.title_box{
			padding-top: 20px;
			background: url('@/assets/title-bg-DNMSieOB.png')no-repeat;
			background-size: 100% 100%;
			h2{
				font-weight: 500;
				color: #59637f;
			}
		}
	}

	.logo-image {
		width: 100px;
		margin-bottom: 16px;
	}

	.input {
		margin-bottom: 12px;
		width: 100%;
	}

	.login-button {
		width: 100%;
	}

	/* 添加注册链接样式 */
	.register-link {
		text-align: right;
		margin-top: 10px;
	}
</style>